<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本环境构建</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
</head>
<body>

<!-- 创建容器-->
<div id="app">
    <span>这是一个id为app的容器</span>
</div>

<div class="ap">
    <span>这是一个class为ap的容器1</span>
</div>


<div class="ap">
    <span >这是一个class为ap的容器2</span>
</div>

<!--
  每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
-->

<script type="text/javascript">
    /*
    *  数据的动态渲染
    *   .jsp    ${username}   el   声明式编程
    *    vue     {{}}       插值语法 -> 声明式编程
    * */

    // 1.创建vue实例
    let vm = new Vue({
        template: '<span>{{info}}</span>',  //  设置vm需要渲染的模板     注意: 通过template模板渲染数据 会替换绑定容器中的原始内容
        data: {    // 设置模板中需要渲染的数据
            info: 'hello Vue'
        }
    })
    // 2. vue实例和容器进行绑定    注: 绑定容器时可以使用多种方式  id  class 节点对象
    // vm.$mount(document.getElementById("app"))
    // vm.$mount(".ap")    //   注:  一个vm实例只能绑定一个容器   一个容器只能被一个vm实例绑定
    vm.$mount("#app")

</script>
</body>
</html>